import React, { memo, useCallback, useEffect, useState } from 'react';
import FaceFinishedIcon from '@/assets/images/face-finished.png';
import FailIcon from '@/assets/images/face-fail.png';
import ToastLoading from '@/assets/icon/ToastLoading.png';
import './index.less';
import { withRouter } from 'react-router-dom';

// @ts-ignore
const JSSDK = window.JSSDK;

interface IFinishedProps {
  history: any;
}

const Finished = (props: IFinishedProps) => {
  const [status, setStatus] = useState(0);
  enum statusList {
    loading = 1,
    success = 2,
    fail = 3
  }

  useEffect(() => {
    // TODO: 补充初始化更新状态
    setStatus(1);
  }, []);

  useEffect(() => {
    // 更新页面标题
    const pageTitleMap = {
      loading: '视频审核中',
      success: '审核通过',
      fail: '审核通过'
    };
    document.title = pageTitleMap[statusList[status]];
  }, [status, statusList]);

  const renderHeader = useCallback(() => {
    let tpl: any = '';
    switch (status) {
      case statusList['loading']:
        tpl = (
          <div className="finished-header">
            <img
              className="finished-face-icon loading-notice-icon"
              src={ToastLoading}
              alt=""
            />
            <div className="finished-content">
              您提交的视频在审核中, 请耐心等待
            </div>
          </div>
        );
        break;
      case statusList['success']:
        tpl = (
          <div className="finished-header">
            <img
              src={FaceFinishedIcon}
              alt="icon"
              className="finished-face-icon"
            />
            <div className="finished-content">
              您提交的视频已审核通过感谢您的参与
            </div>
          </div>
        );
        break;
      case statusList['fail']:
        tpl = (
          <div className="finished-header">
            <img src={FailIcon} alt="icon" className="finished-face-icon" />
            <div className="finished-content">
              您提交的视频经过审核, 因XXX原因未通过，请再次进行认证
            </div>
          </div>
        );
    }
    return tpl;
  }, [status, statusList]);

  return (
    <div className="finished">
      {renderHeader()}
      <div
        className="confirm-wrapper-btn"
        onClick={() => {
          if (statusList['fail'] === status) {
            // TODO: 根据接口进行步骤跳转判断
            props.history.replace('/');
          } else {
            let url = `https://m.jd.com`;
            const targetVersion =
              JSSDK.Client.isJDApp() &&
              JSSDK.Client.getAppVersion() &&
              +JSSDK.Client.getAppVersion().replace(/\./g, '') > 1000;
            if (JSSDK.Client.isJDApp() && targetVersion) {
              try {
                window.location.href =
                  'openApp.jdMobile://virtual?params={"category":"jump","des":"HomePage","sourceType": "m", "sourceValue": "index", "M_sourceFrom": "index", "m_param": {}}';
              } catch (err) {
                window.location.href = url;
              }
            } else {
              window.location.href = url;
            }
          }
        }}
      >
        去京东首页逛一逛
      </div>
    </div>
  );
};

export default memo(withRouter(Finished));
